<template>
	<view class="registerBox">
		<view class="top">
			<h1>注册</h1>
		</view>
		<uni-forms :modelValue="registerForm" ref="Registform" labelWidth="80px">
			<uni-forms-item label="账号" required name="nickname">
				<uni-easyinput v-model="registerForm.nickname" placeholder="1-10个字符不包含空格" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput v-model="registerForm.password" type="password" placeholder="6-20个数字或字母" />
			</uni-forms-item>
			<uni-forms-item label="确认密码" required name="password2">
				<uni-easyinput v-model="registerForm.password2" type="password" placeholder="6-20个数字或字母" />
			</uni-forms-item>
			<uni-forms-item label="性别" required name="gender">
				<radio-group style="margin-top: 8px;" @change="radioChange">
					<label>
						<radio value="男" style="transform:scale(0.7);" />
						<text>男</text>
					</label>
					<label>
						<radio value="女" style="transform:scale(0.7);margin-left: 10px;" />
						<text>女</text>
					</label>
				</radio-group>
			</uni-forms-item>
			<uni-forms-item label="邮箱" required name="email">
				<uni-easyinput v-model="registerForm.email" placeholder="推荐使用QQ邮箱" />
			</uni-forms-item>
			<uni-forms-item label="校验码" class required name="captcha">
				<view class="email">
					<view class="email-input">
						<uni-easyinput v-model="registerForm.captcha" placeholder="4位数校验码" />
					</view>
					<button type="primary" size="mini" @click="sendEmail">发送邮箱验证码</button>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view class="registerBottom">
			<button type="primary" size="mini" @click="register">注册</button>
			<button type="default" size="mini">重置</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerForm: {
					nickname: '',
					password: '',
					password2: '',
					gender: '',
					email: '',
					description: '',
					captcha: ''
				},
				registRules: {
					nickname: {
						rules: [{
								required: true,
								errorMessage: '请输入昵称!'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{2,12}$/
									if (!reg.test(value)) {
										callback('非法昵称!')
									}
									return true
								}
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码!'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/
									if (!reg.test(value)) {
										callback('密码由数字与字母两种字符组成,长度在6-15位!')
									}
									return true
								}
							}
						]
					},
					password2: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码!'
							},
							{
								validateFunction: function(rule, value, data, callback) {

									if (value != this.password) {
										callback('两次密码不一致!')
									}
									return true
								}
							}
						]
					},
					gender: {
						rules: [{
								required: true,
								errorMessage: '请选择账号性别!'
							},
							{
								validateFunction: function(rule, value, data, callback) {

									if (value == '') {
										callback('请选择账号性别!')
									}
									return true
								}
							}
						]
					},
					email: {
						rules: [{
								required: true,
								errorMessage: '请输入邮箱'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
									if (!reg.test(value)) {
										callback('邮箱格式错误!')
									}
									return true
								}
							}
						]
					},
					captcha: {
						rules: [{
								required: true,
								errorMessage: '请输入四位数校验码'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^\d{4}$/
									if (!reg.test(value)) {
										callback('校验码又四位数组组成!')
									}
									return true
								}
							}
						]
					},
				}
			};
		},
		onReady() {
			this.$refs['Registform'].setRules(this.registRules)
		},
		methods: {
			radioChange(e) {
				this.registerForm.gender = e.detail.value
			},
			async sendEmail() {

				let {
					data: res
				} = await uni.$http.get('/wsw/checkCode/mailCode/' + this.registerForm.email)
				if (res.code == 2000) {
					uni.showToast({
						title: '发送成功',
						duration: 1500
					})
				} else {
					uni.showToast({
						title: '发送失败',
						duration: 1500,
					})
				}
			},
			register() {

				this.$refs['Registform'].validate().then(async (result) => {
					let {
						email,
						nickname,
						password,
						gender,
						description
					} = this.registerForm
					let param = {
						email,
						nickname,
						password,
						gender,
						description
					}
					let {
						data: res
					} = await uni.$http.post('/wsw/users/registered/' + this.registerForm.captcha, param)
					if (res.code == 2000) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						uni.showToast({
							title: '注册成功',
							duration: 1500
						})
					} else {
						return uni.showToast({
							title: '注册失败',
							duration: 1500
						})
					}
				}).catch(err => {
					console.log('err', err);
				})

			}
		}
	}
</script>

<style lang="less">
	.registerBox {

		padding: 0 20px;

		.top {
			margin: 10px 0;

			h1 {
				font-size: 24px;
			}
		}

		.uni-forms {
			.uni-easyinput {
				width: 90%;
			}

			.email {
				display: flex;

				.email-input {
					width: 100px;
					display: inline-block;
				}

				button {
					line-height: 40px;
				}


			}
		}


		.registerBottom {
			display: flex;
			justify-content: space-around;
		}
	}
</style>
